.fade-appear {
  opacity: 0;

  &.fade-appear-active {
    opacity: 1;
    transition: opacity .3s ease;
  }
}

.fade-enter {
  opacity: 0;

  &.fade-enter-active {
    opacity: 1;
    transition: opacity .3s ease;
  }
}

.fade-leave {
  opacity: 1;

  &.fade-leave-active {
    opacity: 0;
    transition: opacity .3s ease;
  }
}

.fade-down-appear {
  opacity: 0;

  &.fade-down-appear-active {
    opacity: 1;
    transition: opacity .3s ease;
  }
}

.fade-down-enter {
  opacity: 0;

  &.fade-down-enter-active {
    opacity: 1;
    transition: opacity .3s ease;
  }
}

.fade-down-leave {
  opacity: 1;

  &.fade-down-leave-active {
    opacity: 0;
    transition: opacity .3s ease;
  }
}

.fade-up-appear {
  opacity: 0;

  &.fade-up-appear-active {
    opacity: 1;
    transition: opacity .3s ease;
  }
}

.fade-up-enter {
  opacity: 0;

  &.fade-up-enter-active {
    opacity: 1;
    transition: opacity .3s ease;
  }
}

.fade-up-leave {
  opacity: 1;

  &.fade-up-leave-active {
    opacity: 0;
    transition: opacity .3s ease;
  }
}
